<template>
  <div px-30rpx py-20rpx overflow-hidden bg-white>
    <div class="referral-poster" v-if="disExample && disExample.memberInfo">
      <image :src="posterPath" mode="widthFix" style="width: 600rpx; height: 720rpx" show-menu-by-longpress></image>
      <l-painter css="width: 600rpx; height: 720rpx;background-color: #ffffff;" pathType="url" ref="poster" hidden isCanvasToTempFilePath @success="posterPath = $event">
        <l-painter-image :src="disExample.memberInfo.face"
                         css="width: 84rpx; height: 84rpx; background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; box-sizing: border-box; border-radius: 50%;"/>
        <l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
          <l-painter-text :text="disExample.memberInfo.nickName" css="display: block; padding-bottom: 10rpx; color: #333333; font-size: 32rpx; fontWeight: bold"/>
          <l-painter-text :text="disExample.memberInfo.desc" css="color: #333333; font-size: 26rpx"/>
        </l-painter-view>
        <l-painter-image :src="disExample.memberInfo.code" css="width: 400rpx; height: 400rpx;margin: 50rpx auto;" />
        <!-- <l-painter-qrcode css="width: 400rpx; height: 400rpx;margin: 50rpx auto;" :text="disExample.memberInfo.code"></l-painter-qrcode> -->
        <l-painter-text :text="disExample.memberInfo.tips" css="color: #333333; font-size: 28rpx;margin: 00rpx 96rpx 0;" />
      </l-painter>
    </div>


    <!-- <div mx-40rpx>
      <nut-button type="warning" block @click="copyLink">复制专属分享链接</nut-button>
    </div> -->
    <div class="tips" text-neutral-600 text-28rpx leading-5 mt-30rpx text-justify>
      <div class="title" leading-7 text-neutral-800 font-semibold>操作说明：</div>
      <div my-10rpx>1.使用微信”扫一扫”扫上方二维码，打开分销员申请信息表单页面(需登录会员账号)</div>
      <div my-10rpx>2.填写分销员申请信息表，阅读并同意《分销推广返利规则》，提交后等待平台审核通过即可。</div>
      <div my-10rpx>3.再次进入时，进入商城后点击页面下方[个人中心]，在个人主页中点击[我的分销]进入。</div>
      <div class="title" leading-7 text-neutral-800 font-semibold>提示:</div>
      <div my-10rpx>申请成为分销员需要登录或注册新的电商平台会员账号，已经成为分销员的用户不可重复申请。</div>
    </div>
    <lime-painter v-if="false" />
  </div>
</template>

<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import configs from '@/config/config';
import storage from '@/utils/storage';
  import { getQrcode } from '@/api/common';
  const routerVal = ref<any>({});
// 分销分享 实例
  
  const disExample = ref<any>({
    memberInfo: {
      face: storage.getUserInfo().face || "/static/default.png", //头像
      nickName: storage.getUserInfo().nickName || "",
      mobile: storage.getUserInfo().mobile || "",
      desc: `邀请您注册${configs.name}平台账号`,
      tips: `扫描上方二维码进入${configs.name}商城`,
      code: ""
    }
  })
  const posterPath = ref<string>(''); // 海报临时路径
  const sharingLink = ref<string>('');

  function h5Copy(content: string) {
    if (!document.queryCommandSupported('copy')) {
      // 不支持
      return false
    }
    let textarea = document.createElement("textarea")
    textarea.value = content
    textarea.readOnly = true
    document.body.appendChild(textarea)
    textarea.select() // 选择对象
    textarea.setSelectionRange(0, content.length) //核心
    let result = document.execCommand("copy") // 执行浏览器复制命令
    textarea.remove()
    uni.showToast({
      title: "复制成功!",
      icon: "none"
    })
    return result
  }
  // 复制链接
  function copyLink() {
    // #ifdef H5
    h5Copy(sharingLink.value);
    // #endif

    // #ifndef H5
    uni.setClipboardData({
      data: sharingLink.value,
      success: () => {
        uni.showToast({
          title: "复制成功!",
          duration: 3000,
          icon: "none",
        });
      },
      fail:(error)=> {
        console.log('失败',error);
        uni.showToast({
          title: '复制失败',
          icon: 'none'
        });
      }
    });
    // #endif
  }

  onLoad((options: any) => {
    routerVal.value = options;
  })

  onMounted(async () => {
    // sharingLink.value = configs.shareLink + "/#/pages/mine/distribution/auth?distributionId=" + routerVal.value.id;
    
    const accountInfo = uni.getAccountInfoSync();
    const envVersion = accountInfo.miniProgram.envVersion;
    // 获取小程序二维码的参数
    const qrCodeParams = {
      page: "pages/mine/distribution/auth",
      scene: `${routerVal.value.id}`,
      check_path: envVersion === 'release' ? true : false,
      envVersion: envVersion,
      width: 400
    }

    const qrCodeUrl:string = await getQrcode(qrCodeParams);

    disExample.value.memberInfo.code = qrCodeUrl;
  })

</script>

<style scoped lang="scss">
  .referral-poster {
    width: 604rpx;
    height: 724rpx;
    margin: 30rpx auto;
    box-sizing: border-box;
    border: 1rpx solid #ddd;
  }

</style>
